<template>
  <!--batchCar el-dialog start -->
  <el-dialog title="添加车辆" :visible.sync="addCarVisible" @close="close" width="30%" class="dialog-container">
    <el-form class="dialog-container-form">
      <el-form-item label="车牌号">
        <el-input v-model="model.car.car_no" placeholder="请填写车牌号"></el-input>
      </el-form-item>
      <div class="block">
        <span class="demonstration">车辆品牌</span>
        <el-cascader :options="options" clearable placeholder="品牌首字母/品牌名称/品牌型号" @change="carBrandChange"></el-cascader>
      </div>
      <div class="block">
        <span class="demonstration">取车城市</span>
        <el-cascader :options="city" clearable v-model="pickup" @change="carCityChange"></el-cascader>
      </div>
      <el-form-item label="取车详细地址">
        <el-input v-model="model.car_rent_rule.pickup_location" placeholder="请填写取车详细地址" @blur="log"></el-input>
      </el-form-item>
      <div class="block">
        <span class="demonstration">还车城市</span>
        <el-cascader :options="city" clearable></el-cascader>
      </div>
      <el-form-item label="还车详细地址">
        <el-input v-model="model.car_rent_rule.return_location" placeholder="请填写还车详细地址"></el-input>
      </el-form-item>
      <div class="blocks">
        <div class="block">
          <span class="demonstration">取车时间</span>
          <el-time-picker
            v-model="model.car_rent_rule.pickup_time"
            placeholder="请选择取车时间">
          </el-time-picker>
        </div>
        <div class="block">
          <span class="demonstration">还车时间</span>
          <el-time-picker
            v-model="model.car_rent_rule.return_time"
            placeholder="请选择还车时间">
          </el-time-picker>
        </div>
      </div>
      <el-form-item label="租赁价格">
        <el-input v-model="model.car_price.rent_fee" placeholder="请填写租赁价格/元/天"></el-input>
      </el-form-item>
      <div class="blocks">
        <div class="block">
          <span class="demonstration">车辆档位信息</span>
          <el-select v-model="model.car.car_info.car_gear" placeholder="请选择车辆档位">
            <el-option
              v-for="item in car_gear_info"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="block">
          <span class="demonstration">车辆年龄</span>
          <el-select v-model="model.car.car_info.car_old" placeholder="请选择车辆年龄">
            <el-option
              v-for="item in car_old_info"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click.native="save">保 存</el-button>
    </span>
    <div id="container"></div>
  </el-dialog>
  <!--batchCar el-dialog end -->
</template>

<script>
import { putCar, feachCarNo } from './server'
import { getPrimaryKey } from '../../../utils/comment'
export default {
  data () {
    return {
      model: {
        car: {
          id: '',
          account_id: '',
          car_no: '', // 车牌号
          car_model_id: '', // 车辆的车型id
          car_city: '',
          car_info: {
            car_gear: '',
            car_old: '',
            lease_time: '整月起租'
          } // 车辆基础信息
        },
        car_price: {
          id: '',
          car_id: '',
          rent_fee: '' // 租赁价格
        },
        car_rent_rule: {
          id: '',
          car_id: '',
          pickup_location: '', // 取车详细地点信息
          return_location: '', // 还车详细地点信息
          pickup_longitude: null, // 取车地经度
          pickup_latitude: null, // 取车地维度
          pickup_time: '', // 取车时间
          return_time: '' // 还车时间
        }
      },
      addCarVisible: false,
      options: [], // 汽车品牌id
      car_gear_info: [
        {
          value: '手动挡',
          label: '手动挡'
        },
        {
          value: '自动挡',
          label: '自动挡'
        }],
      car_old_info: [
        {
          value: '半',
          label: '半年'
        },
        {
          value: '一',
          label: '一年'
        },
        {
          value: '二',
          label: '二年'
        },
        {
          value: '三',
          label: '三年'
        },
        {
          value: '四',
          label: '四年'
        },
        {
          value: '五',
          label: '五年'
        },
        {
          value: '六',
          label: '六年'
        },
        {
          value: '七',
          label: '七年'
        },
        {
          value: '八',
          label: '八年'
        },
        {
          value: '九',
          label: '九年'
        },
        {
          value: '十',
          label: '十年'
        },
        {
          value: '超过十',
          label: '超过十年'
        }],
      city: [], // 城市三级联动数据
      pickup: ''
    }
  },
  methods: {
    close () {
      this.addCarVisible = false
      this.$emit('close', false)
      this.model = {
        car: {
          id: '',
          account_id: '',
          car_no: '', // 车牌号
          car_model_id: '', // 车辆的车型id
          car_city: '',
          car_info: {
            car_gear: '',
            car_old: '',
            lease_time: '整月起租'
          } // 车辆基础信息
        },
        car_price: {
          id: '',
          car_id: '',
          rent_fee: '' // 租赁价格
        },
        car_rent_rule: {
          id: '',
          car_id: '',
          pickup_location: '', // 取车详细地点信息
          return_location: '', // 还车详细地点信息
          pickup_longitude: null, // 取车地经度
          pickup_latitude: null, // 取车地维度
          pickup_time: '', // 取车时间
          return_time: '' // 还车时间
        }
      }
    },
    async save () {
      const data = JSON.parse(JSON.stringify(this.model))
      if (!data.car.car_no) {
        this.$message.warning('请填写车牌号')
        return
      }
      if (!data.car.car_model_id) {
        this.$message.warning('请选择车辆品牌')
        return
      }
      if (!data.car_rent_rule.pickup_location) {
        this.$message.warning('请选择完成的取车城市信息')
        return
      }
      if (!data.car_rent_rule.return_location) {
        this.$message.warning('请选择完成的还车城市信息')
        return
      }
      if (!data.car_price.rent_fee) {
        this.$message.warning('请填写租赁价格')
        return
      }
      const resData = await feachCarNo({ car_no: data.car.car_no })
      if (resData && resData.code === 'ok' && Object.keys(resData.data).length !== 0) {
        this.$message.warning('车牌号已存在，请检查车牌号码。')
        return
      }
      const accountId = this.$getLocalStorage('rootAccountId') || ''
      const keyId = await getPrimaryKey(3)
      const keyId1 = keyId.data[0]
      const keyId2 = keyId.data[1]
      const keyId3 = keyId.data[2]
      this.model.car.id = keyId1
      this.model.car.account_id = accountId
      this.model.car.is_monthly_subscription = true
      this.model.car_price.id = keyId2
      this.model.car_price.car_id = keyId1
      this.model.car_price.rent_fee = Number(this.model.car_price.rent_fee) * 100
      this.model.car_rent_rule.id = keyId3
      this.model.car_rent_rule.car_id = keyId1
      const res = await putCar(this.model)
      if (res && res.code === 'ok') {
        this.$message.success('新增车辆成功')
        this.close()
      } else {
        this.$message.error('新增车辆失败')
      }
    },
    // 车辆品牌的联动
    carBrandChange (v) {
      this.model.car.car_model_id = v[2]
    },
    // 车辆品牌的联动
    carCityChange (v) {
      this.model.car.car_city = this.pickup[0] + this.pickup[1] + this.pickup[2]
    },
    // 交还车经纬度查询
    log () {
      const that = this
      const map = new window.BMap.Map('container')
      const localSearch = new window.BMap.LocalSearch(map)
      map.clearOverlays()
      const keyword = this.pickup[0] + this.pickup[1] + this.pickup[2] + this.address
      localSearch.setSearchCompleteCallback(function (searchResult) {
        const poi = searchResult.getPoi(0)
        that.model.car_rent_rule.pickup_longitude = poi.point.lng
        that.model.car_rent_rule.pickup_latitude = poi.point.lat
      })
      localSearch.search(keyword)
    }
  },
  props: {
    flags: {
      type: Boolean,
      default: false
    },
    brands: {
      type: Array,
      default: function () {
        return []
      }
    },
    citys: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  watch: {
    flags: {
      handler (newValue, oldValue) {
        this.addCarVisible = newValue
      }
    },
    brands: {
      handler (newValue, oldValue) {
        this.options = newValue
      }
    },
    citys: {
      handler (newValue, oldValue) {
        this.city = newValue
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import './index.scss'
</style>
